<template>
	<!-- excel界面 -->
	<div class="game">
		<!--工具栏-->
		<div class="toolbars">
			<div class="group font">
				<div class="body">
					<div class="sub sub-top">
						<select id="fontfamily" class="fontfamily">
							<option value="微软雅黑" selected="selected">微软雅黑</option>
							<option value="SimSun">宋体</option>
						</select>
						<select id="fontsize" class="fontsize">
							<option value="12px" selected="selected">12</option>
							<option value="14px">14</option>
						</select>
					</div>
					<div class="sub sub-bottom">
						<button type="button" class="tag-btn btn-bold">
							<i class="tag bold"></i>
						</button>
						<button type="button" class="tag-btn btn-italic">
							<i class="tag italic"></i>
						</button>
						<button type="button" class="tag-btn btn-underline">
							<i class="tag underline"></i>
						</button>
						<button type="button" class="tag-btn btn-strike">
							<i class="tag strike"></i>
						</button>
						<button type="button" class="tag-btn" id="bgColor">
							<i class="tag bgColor"></i>
						</button>
						<input type="color" id="bgColorSelect" style="display: none">
						<button type="button" class="tag-btn" id="fontColor">
							<i class="tag fontColor"></i>
						</button>
						<input type="color" id="fontColorSelect" style="display: none">
					</div>
				</div>
				<div class="foot">字体</div>
			</div>
			<div class="group alignment">
				<div class="body">
					<div class="sub sub-left">
						<button type="button" class="tag-btn btn-htLeft btn-ah">
							<i class="tag leftAlign"></i>
						</button>
						<button type="button" class="tag-btn btn-htCenter btn-ah">
							<i class="tag levelAlign"></i>
						</button>
						<button type="button" class="tag-btn btn-htRight btn-ah">
							<i class="tag rightAlign"></i>
						</button>
						<button type="button" class="tag-btn btn-htTop btn-av">
							<i class="tag topAlign"></i>
						</button>
						<button type="button" class="tag-btn btn-htMiddle btn-av buttonBgColor">
							<i class="tag velAlign"></i>
						</button>
						<button type="button" class="tag-btn btn-htBottom btn-av">
							<i class="tag bottomAlign"></i>
						</button>
					</div>
					<div class="sub sub-right">
						<button type="button" class="tag-btn merge-btn" @click="getddddd">
							<i class="tag merge"></i> <span>合并单元格</span>
						</button>
						<button type="button" class="tag-btn split-btn">
							<i class="tag split"></i> <span>拆分单元格</span>
						</button>
					</div>

				</div>
				<div class="foot">对齐方式</div>
				<a class="corner_mark"></a>
			</div>
			<div class="group cells" style="padding: 0px 10px;">
				<div class="body">
					<div class="sub sub-right">
						<ul class="border-btn select-ctrl-border">
							<li class="borderTop"><i class="tag btn-borderTop"></i></li>
							<li class="borderRight"><i class="tag btn-borderRight"></i></li>
							<li class="borderBottom"><i class="tag btn-borderBottom"></i></li>
							<li class="borderLeft"><i class="tag btn-borderLeft"></i></li>
							<li class="borderAll"><i class="tag btn-borderAll"></i></li>
							<li class="whiteSpace buttonBgColor"><i class="tag wrap"></i></li>
							<li class="borderColor"><i class="tag borderColor"></i></li>
							<input type="color" id="borderColor" style="display: none">
							<li class="borderStyle" style="position: relative">
								<i class="tag borderStyleIcon"></i>
								<div class="selectBorderStyle">
									<div class="borderSolid borderStyleOption">实线</div>
									<div class="borderDashed borderStyleOption">虚线</div>
									<div class="borderDouble borderStyleOption">双线</div>
									<div class="borderNone borderStyleOption">无线</div>
								</div>
								<!--用来记录选择的样式-->
								<select class="borderStyleOption" style="display: none">
									<option value="solid" selected="selected">实线</option>
									<option value="dashed">虚线</option>
									<option value="double">双线</option>
									<option value="none">无线</option>
								</select>
							</li>
						</ul>
					</div>

				</div>
				<div class="foot">单元格</div>
				<a class="corner_mark"></a>
			</div>
			<div class="group edit" style="display: none;">
				<div class="body">
					<div class="sub sub-left" style="width: 100px;">
						<div class="input-group">
							<label>列宽</label> <input type="number" id="cell-width" class="cell-width">
						</div>
						<div class="input-group">
							<label>行高</label> <input type="number" id="cell-height" class="cell-height">
						</div>
					</div>
				</div>
				<div class="foot">编辑</div>
			</div>
			<div class="group subgame">
				<div class="body">
					<div class="sub sub-left">
						<button type="button" class="tag-btn merge-btn" @click="setReady"
							v-show="!game.playerList[0].ready">
							<i class="tag merge"></i> <span>准备</span>
						</button>
						<!-- <button type="button" class="tag-btn merge-btn">
								<i class="tag split"></i> <span>重置</span>
							</button> -->
						<button type="button" class="tag-btn merge-btn">
							<i class="tag split"></i> <span>暂停</span>
						</button>
					</div>

					<div class="sub sub-right player">
						<!-- 机器 1 -->
						<div class="player-item">
							<div class="player-item-name">
								{{game.playerList[1].name}}（{{game.playerList[1].money}}分）：
							</div>
							<div class="player-item-cards">{{game.playerList[1].pokerList.length}}张</div>
							<div class="" v-show="game.stage==='ready'">{{game.playerList[1].ready?'已准备':'未准备'}}
							</div>
							<div class="" v-if="game.stage==='jiaoFen'&&game.playerList[1].jiaoFen!=-1">
								<span v-if="game.playerList[1].jiaoFen!=0">
									{{game.playerList[1].jiaoFen}}分
								</span>
								<span v-if="game.playerList[1].jiaoFen==0">
									不叫
								</span>
							</div>
							<div :class="game.playerList[1].type==='nongmin'?'player-role':'player-role-red'"
								v-show="game.stage==='play'">{{game.playerList[1].type==='nongmin'?'农民':'地主'}}</div>
							<div><span style="color: lightgray;margin-left: 10px;"
									v-show="game.currentPlayer===game.playerList[1]">出牌中...</span></div>
						</div>
						<!-- 机器 2 -->
						<div class="player-item">
							<div class="player-item-name">{{game.playerList[2].name}}（{{game.playerList[2].money}}分）：
							</div>
							<div class="player-item-cards">{{game.playerList[2].pokerList.length}}张</div>
							<div class="" v-show="game.stage==='ready'">{{game.playerList[2].ready?'已准备':'未准备'}}
							</div>
							<div class="" v-if="game.stage==='jiaoFen'&&game.playerList[2].jiaoFen!=-1">
								<span v-if="game.playerList[2].jiaoFen!=0">
									{{game.playerList[2].jiaoFen}}分
								</span>
								<span v-if="game.playerList[2].jiaoFen==0">
									不叫
								</span>
							</div>
							<div :class="game.playerList[2].type==='nongmin'?'player-role':'player-role-red'"
								v-show="game.stage==='play'">{{game.playerList[2].type==='nongmin'?'农民':'地主'}}</div>
							<div><span style="color: lightgray;margin-left: 10px;"
										v-show="game.currentPlayer===game.playerList[2]">出牌中...</span></div>
						</div>
						<!-- 我 0 -->
						<div class="player-item">
							<div class="player-item-name">{{game.playerList[0].name}}（{{game.playerList[0].money}}分）：
							</div>
							<div class="player-item-cards">{{game.playerList[0].pokerList.length}}张</div>
							<div class=""
								v-show="game.stage==='jiaoFen'&&game.currentJiaoFenPlayer===game.playerList[0]">
								<button type="button" class="btn-min"
									@mousedown="game.playerList[0].setJiaoFen(0)">不叫</button>
								<button type="button" class="btn-min"
									@mousedown="game.playerList[0].setJiaoFen(1)">1分</button>
								<button type="button" class="btn-min"
									@mousedown="game.playerList[0].setJiaoFen(2)">2分</button>
								<button type="button" class="btn-min"
									@mousedown="game.playerList[0].setJiaoFen(3)">3分</button>
							</div>
							<div class=""></div>
							<div :class="game.playerList[0].type==='nongmin'?'player-role':'player-role-red'"
								v-show="game.stage==='play'">{{game.playerList[0].type==='nongmin'?'农民':'地主'}}</div>
							<!-- 出牌键 -->
							<div class="player-item-btns" v-show="game.currentPlayer===game.playerList[0]">
								<a class="btn-play" href="#" @click="pass">不出</a>
								<a class="btn-play" href="#" @click="sendPoker2">出牌</a>
								<!-- <a class="btn-play" href="#">重置</a> -->
								<span style="color: lightgray;margin-left: 10px;"
									v-show="game.currentPlayer===game.playerList[0]">请在{{game.second}}秒内出牌</span>
							</div>
						</div>
					</div>
				</div>
				<div class="foot btns-group"><span>摸鱼</span>
					<div v-if="game.stage==='play'" style="display: inline-block;">
						地主牌：<span v-for="item in game.dizhuPokerList">
							<label v-if="item.text==='S'">小王</label>
							<label v-else-if="item.text==='X'">大王</label>
							<label v-else>{{item.text}}</label>
						</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 提示栏 -->
		<div class="tips" style="height: 25px;"></div>
		<!-- 表格主体 horizontal横 vertical竖-->
		<div class="excel excel-table" onselectstart="return false">
			<table>
				<tbody>
					<!-- excel横排表格头 A B C D... -->
					<tr style="height: 25px;" class="thead">
						<td v-if="game.stage==='ready'" class="drug-ele-td drug-ele-td-vertical text-center color-gary"
							style="width: 45px;">
							准备
						</td>
						<td v-if="game.stage==='jiaoFen'"
							class="drug-ele-td drug-ele-td-vertical text-center color-gary" style="width: 45px;">
							叫分
						</td>
						<td v-if="game.stage==='play'" class="drug-ele-td drug-ele-td-vertical text-center color-gary"
							style="width: 45px;">
							游戏中
						</td>
						<td class="drug-ele-td drug-ele-td-horizontal text-center td-head-large">A</td>
						<td class="drug-ele-td drug-ele-td-horizontal text-center td-head-large">B</td>
						<td class="drug-ele-td drug-ele-td-horizontal text-center td-head-large">C</td>
						<td v-for="(item,index) in poxV" v-if="index>2"
							class="drug-ele-td drug-ele-td-horizontal text-center">
							{{item}}
						</td>
					</tr>
					<!-- excel第一排 -->
					<tr style="height: 25px;">
						<td class="drug-ele-td drug-ele-td-vertical de-table-td">1</td>
						<td class="text-center" :class="game.currentPlayer===game.playerList[2]?'player-active':''">{{game.playerList[2].name}}</td>
						<td></td>
						<td class="text-center" :class="game.currentPlayer===game.playerList[1]?'player-active':''">{{game.playerList[1].name}}</td>
						<td v-for="(itemV,indexV) in tdV" :key="'td'+indexV"></td>
					</tr>
					<!-- excel第二排 -->
					<tr style="height: 25px;">
						<td class="drug-ele-td drug-ele-td-vertical de-table-td">2</td>
						<!-- 机器2牌面 -->
						<td class="text-center"
							v-if="game.playerList[2].lastSendObj&&game.playerList[2].lastSendObj.poker[0].text">
							<span v-for="item in game.playerList[2].lastSendObj.poker">
								<label v-if="item.text==='S'">小王</label>
								<label v-else-if="item.text==='X'">大王</label>
								<label v-else>{{item.text}}</label>
							</span>
						</td>
						<td class="text-center"
							v-if="game.playerList[2].lastSendObj&&!game.playerList[2].lastSendObj.poker[0].text">
							<span>pass</span>
						</td>
						<td v-if="game.playerList[2].lastSendObj==null"></td>
						<td></td>
						<!-- 机器1牌面 -->
						<td class="text-center"
							v-if="game.playerList[1].lastSendObj&&game.playerList[1].lastSendObj.poker[0].text">
							<span v-for="item in game.playerList[1].lastSendObj.poker">
								<label v-if="item.text==='S'">小王</label>
								<label v-else-if="item.text==='X'">大王</label>
								<label v-else>{{item.text}}</label>
							</span>
						</td>
						<td class="text-center"
							v-if="game.playerList[1].lastSendObj&&!game.playerList[1].lastSendObj.poker[0].text">
							<span>pass</span>
						</td>
						<td v-for="(itemV,indexV) in tdV" :key="'td'+indexV"></td>
					</tr>
					<!-- excel第三排 -->
					<tr style="height: 25px;">
						<td class="drug-ele-td drug-ele-td-vertical de-table-td">3</td>
						<td></td>
						<td class="text-center" :class="game.currentPlayer===game.playerList[0]?'player-active':''">{{game.playerList[0].name}}</td>
						<td v-for="(itemV,indexV) in tdV" :key="'td'+indexV"></td>
					</tr>
					<!-- excel第四排 -->
					<tr style="height: 25px;">
						<td class="drug-ele-td drug-ele-td-vertical de-table-td">4</td>
						<td></td>
						<!-- 我的牌面 -->
						<td class="text-center"
							v-if="game.playerList[0].lastSendObj&&game.playerList[0].lastSendObj.poker[0].text">
							<span v-for="item in game.playerList[0].lastSendObj.poker">
								<label v-if="item.text==='S'">小王</label>
								<label v-else-if="item.text==='X'">大王</label>
								<label v-else>{{item.text}}</label>
							</span>
						</td>
						<td class="text-center"
							v-if="game.playerList[0].lastSendObj&&!game.playerList[0].lastSendObj.poker[0].text">
							<span>pass</span>
						</td>
						<td v-for="(itemV,indexV) in tdV" :key="'td'+indexV"></td>
					</tr>
					<!-- excel第五排 排面-->
					<tr style="height: 25px;">
						<td class="drug-ele-td drug-ele-td-vertical de-table-td">5</td>
						<td rowspan="1" colspan="3" style="background-color: lightgray;text-align: right;">我的牌=></td>
						<td @mouseenter="enter($event,item)" @mousedown="pickPoker(item)"
							v-for="item in game.playerList[0].pokerList"
							:class="{ selected: item.selected}" class="poker">
							<span v-if="item.text==='S'">小王</span>
							<span v-else-if="item.text==='X'">大王</span>
							<span v-else>{{item.text}}</span>
						</td>
						<td v-for="(itemV,indexV) in tdV" :key="indexV"></td>
					</tr>
					<!-- excel 虚拟补充-->
					<tr style="height: 25px;" v-for="(itemH,indexH) in tdH" :key="indexH">
						<td v-for="(itemV,indexV) in tdV" :key="indexV" v-if="indexV!==0"></td>
						<td v-else class="drug-ele-td drug-ele-td-vertical de-table-td">{{indexH+6}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>


<script>
	import Game from "../doudizhu/Game";
	export default {
		name: 'HelloWorld',
		components: {},
		data() {
			return {
				data: '',
				game: new Game(),
				playerStr: '',
				pokerList: [],
				tdH: 25, //数字方向
				tdV: 52, //字母方向
				dic: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
					'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG', 'HH','II','JJ','KK','MM','NN','OO','PP','QQ','RR','SS','TT','UU','VV','WW','XX','YY','ZZ'
				], //竖坐标字典
				poxH: [], //数字坐标
				poxV: [], //字母坐标
				theTop: '游戏中'

			}
		},
		computed: {
			// playerMarginLeft: function() {
			// 	return (window.innerWidth - (this.game.playerList[0].pokerList.length * 50)) / 2;
			// },
			// deskPokerMarginLeft: function() {
			// 	return (window.innerWidth - (this.game.playerList[0].lastSendObj.poker.length * 50)) / 2;
			// },
			// buttonMarginLeft: function() {
			// 	return (window.innerWidth - 400) / 2;
			// },
			// playerJiaoFenMargin: function() {
			// 	return window.innerWidth / 2 - 30;
			// },
			// dizhuPokerMarginLeft: function() {
			// 	return (window.innerWidth - (this.game.dizhuPokerList.length * 50)) / 2;
			// },
		},
		mounted() {
			// this.data = this.game.playerList[1].name;
			// console.log(this.data);
			// window.game = this.game;
			// **************************************
			this.init()
		},
		methods: {
			getddddd() {
				console.dir(this.game);
				// console.log(this.game.oldPokerList);
			},
			/**
			 * 初始化excel表格
			 */
			init() {
				// for (let i = 1; i < 100; i++) {
				// 	this.poxH.push(i);
				// }
				for (let i = 0; i < this.dic.length; i++) {
					this.poxV.push(this.dic[i])
				}
			},
			setExData() {
				// this.tt.D1='356'
				// this.tt={...this.tt,D1:'356'}
				console.log($('.A1'));
				$('.A1').html('123456')
			},
			// 获取值
			getExData() {
				console.log(this.tt.D1);
			},
			/**
			 * 准备游戏
			 */
			setReady: function() {
				this.game.playerList[0].setReady();
			},

			enter: function(e, poker) {
				if (e.buttons === 1) {
					this.pickPoker(poker);
				}
			},

			pickPoker(poker) {
				if (!poker.selected) {
					poker.selected = true;
					this.pokerList.push(poker);
				} else {
					poker.selected = false;
					for (let i = 0; i < this.pokerList.length; i++) {
						if (this.pokerList[i] === poker) {
							this.pokerList.splice(i, 1);
						}
					}
				}
			},

			sendPoker2() {
				let game = this.game;
				let success = game.playerList[0].playByPokerList(this.pokerList);
				if (success) {
					this.pokerList = [];
				}
			},

			pass() {
				this.game.playerList[0].playByString('pass');
			},

		},
	}
</script>

<style scoped>
	/* 	.moyu-player-ready {
		color: lightgray;
	}

	.moyu-bom-left {
		position: fixed;
		top: 40px;
		left: 20px;
		height: 200px;
		width: 100px;
		text-align: center;
		color: lightgray;
	}

	.moyu-bom {
		position: fixed;
		top: 40px;
		right: 20px;
		height: 200px;
		width: 100px;
		text-align: center;
		color: lightgray;
	}

	.pokerDesk {
		height: 50%;
		width: 90px;
		float: left;
		margin-left: -50px;
		font-size: 30px;
		background-repeat: no-repeat;
		background-size: cover;
		color: lightgray;
	}

	.pokerDizhu {
		height: 100%;
		width: 50px;
		float: left;
		margin-left: -25px;
		background-repeat: no-repeat;
		color: lightgray;
	}

	

	.s {
		background-image: url("../img/s.png");
	}

	.x {
		background-image: url("../img/x.png");
	} */
</style>
